<script setup>
import {ref, reactive, onMounted} from 'vue'
import {Plus} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import MerchantCrop from "@/components/cropper/MerchantCrop.vue"
import checkMap from "@/components/BaiduMap/checkMap.vue"
import {post, get} from "@/util/axios.js"
import {getUser} from "@/components/userInfo.js";

// 表单数据
const form = reactive({
    shopName: '',
    shopImage: null,
    licenseNumber: '',
    licenseImage: [],
    detail: '',
})
onMounted(() => {
    checkApply()
})

const didApply = ref(false)
const checkApply = () => {
    get('/merchant/checkApply', {}, content => {
        didApply.value = content
    })
}

// 表单验证规则
const rules = reactive({
    shopName: [
        {required: true, message: '请输入店铺名称', trigger: 'blur'},
        //{min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur'}
    ],
    shopImage: [
        {required: true, message: '请上传店铺图片', trigger: 'change'},
    ],
    licenseNumber: [
        {required: true, message: '请输入营业执照编号', trigger: 'blur'},
        //{ pattern: /^[a-zA-Z0-9]{15}$|^[a-zA-Z0-9]{18}$/, message: '请输入15或18位营业执照编号', trigger: 'blur' }
    ],
    licenseImage: [
        {required: true, message: '请上传营业执照照片', trigger: 'change'}
    ],
    position: [
        {required: true, message: '请选择地址', trigger: 'blur'},
        //{ min: 5, max: 100, message: '长度在5到100个字符', trigger: 'blur' }
    ],
    detail: [
        {required: true, message: '请输入详细地址', trigger: 'blur'},
        //{ min: 5, max: 100, message: '长度在5到100个字符', trigger: 'blur' }
    ]
})


const formRef = ref(null)

const childReset = ref(null)

const handleFileSelected = (file) => {
    form.shopImage = file
}
const positionVisible = ref(false)

const getLocation = ref({
    province: '',
    city: '',
    district: '',
    position: '',
    lng: '',
    lat: ''
})

const getPosition = () => {
    form.position = getLocation.value.position
    positionVisible.value = false
}

const handleLocationGet = (position) => {
    getLocation.value = position
    console.log(getLocation.value)
}


// 处理营业执照图片上传
const handleLicenseImageChange = (file, fileList) => {
    form.licenseImage = fileList
}

// 处理营业执照图片移除
const handleLicenseImageRemove = (file, fileList) => {
    form.licenseImage = fileList
}

const submitMerchant = reactive({
    userId: '',
    shopName: '',
    MerPicture: null,
    number: '',
    MerCheckPhoto: null,
    location: '',
    status: 0,
    province: '',
    city: '',
    district: '',
    position: '',
    detail: '',
    lng: '',
    lat: '',
})

const giveValue = () => {
    submitMerchant.userId = getUser.value.id
    submitMerchant.province = getLocation.value.province
    submitMerchant.city = getLocation.value.city
    submitMerchant.district = getLocation.value.district
    submitMerchant.position = getLocation.value.position
    submitMerchant.detail = form.detail
    submitMerchant.lng = (getLocation.value.lng) * 1000000
    submitMerchant.lat = (getLocation.value.lng) * 1000000
    submitMerchant.shopName = form.shopName
    submitMerchant.MerPicture = form.shopImage
    submitMerchant.number = form.licenseNumber
    submitMerchant.MerCheckPhoto = form.licenseImage[0].raw
}

// 提交表单
const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            giveValue()
            //console.log(submitMerchant)
            console.log(submitMerchant)
            post('/merchant/apply', submitMerchant, content => {
                ElMessage.success('提交申请成功，请等待审核通过！')
                resetForm()
                checkApply()
            })
        } else {
            ElMessage.error('请填写完整正确的信息')
            return false
        }
    })
}

// 重置表单
const resetForm = () => {
    formRef.value.resetFields()
    form.shopImage = null
    form.licenseImage = []
    if (childReset.value) {
        childReset.value.reset()
    }
}


</script>

<template>
    <div>
        <div v-if="didApply" class="apply-merchant-container">
            <h1 class="title">商家入驻申请</h1>

            <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    label-width="120px"
                    class="apply-form">
                <!-- 店铺名称 -->
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input v-model="form.shopName" placeholder="请输入店铺名称"/>
                </el-form-item>

                <!-- 店铺图片 -->
                <el-form-item label="店铺封面" prop="shopImage">
                    <MerchantCrop
                            :aspect-ratio="8/5"
                            ref="childReset"
                            @fileSelected="handleFileSelected"/>
                </el-form-item>

                <!-- 营业执照编号 -->
                <el-form-item label="营业执照编号" prop="licenseNumber">
                    <el-input v-model="form.licenseNumber" placeholder="请输入营业执照编号"/>
                </el-form-item>

                <!-- 营业执照照片 -->
                <el-form-item label="营业执照照片" prop="licenseImage">
                    <el-upload
                            v-model:file-list="form.licenseImage"
                            action="#"
                            list-type="picture-card"
                            :auto-upload="false"
                            :limit="1"
                            style="width: 155px;height: 155px ; overflow: hidden"
                            :on-change="handleLicenseImageChange"
                            :on-remove="handleLicenseImageRemove">
                        <el-icon>
                            <Plus/>
                        </el-icon>
                    </el-upload>
                    <div class="el-upload__tip">请上传清晰的营业执照照片</div>
                </el-form-item>

                <!-- 店铺地址 -->
                <el-form-item label="店铺地址" class="merchant-position" prop="position">
                    <el-button plain @click="positionVisible = true">
                        选择地址
                    </el-button>
                    <el-input v-model="form.position"
                              prop="position"
                              :value="form.position"
                              style="width: 550px"
                              placeholder="请点击左侧选择地址" disabled/>
                </el-form-item>
                <el-form-item prop="detail">
                    <el-input v-model="form.detail"
                              placeholder="请输入详细地址"/>
                </el-form-item>

                <!-- 提交按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交申请</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            <el-dialog v-model="positionVisible" title="请选择地址" width="1000" top="20px">
                <checkMap @locationGet="handleLocationGet"></checkMap>
                <div class="submit-map">
                    <el-button type="primary" @click="getPosition">确认选择</el-button>
                    <el-button @click="positionVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </div>
        <div v-else>
            <h1 class="title">您已提交过申请，请耐心等待审核！</h1>
        </div>
    </div>
</template>

<style scoped>


.submit-map {
    text-align: center;
    margin-top: 20px;
}

.merchant-position {
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.apply-merchant-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
}

.apply-form {
    margin: 0 auto;
}

.el-upload__tip {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

.el-form-item {
    margin-bottom: 22px;
}
</style>